<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>患者端 · 轻量化就医服务门户</title>
    <link rel="stylesheet" href="/static/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script defer src="/static/main.js"></script>
    <meta name="description" content="在线挂号、报告查询、电子处方、慢病监测、在线咨询、支付与导航的患者端门户" />
</head>

<body>
    <header class="header">
        <div class="brand">
            <div class="logo">🏥</div>
            <div>
                <div class="brand-title">患者端 · 就医服务</div>
                <div class="brand-sub">轻量化 · 便捷 · 响应式</div>
            </div>
        </div>
        <nav class="nav">
            <a href="#booking">挂号</a>
            <a href="#results">报告</a>
            <a href="#rx">处方</a>
            <a href="#record">档案</a>
            <a href="#chronic">慢病</a>
            <a href="#consult">咨询</a>
            <a href="#pay">支付</a>
            <a href="#nav">导航</a>
            <a href="#feedback">评价</a>
        </nav>
    </header>

    <main class="container">
        <!-- 一、就医流程服务 -->
        <section id="booking" class="card">
            <h2>在线挂号</h2>
            <p class="muted">选择院区/科室/医生与时段，提交后生成挂号凭证</p>
            <form class="grid grid-4" id="form-booking">
                <input class="input" name="hospital" placeholder="院区（示例医院）" />
                <input class="input" name="dept" placeholder="科室（如：心内科）" required />
                <input class="input" name="doctor" placeholder="医生（如：张医生）" required />
                <input class="input" name="slot" placeholder="就诊时段（如：10/31 上午）" required />
                <button class="btn primary" type="submit">提交预约</button>
            </form>
            <pre class="output" id="out-booking"></pre>
        </section>

        <section id="results" class="card">
            <h2>检查检验查询</h2>
            <p class="muted">查看预约时间与结果，支持图文报告与影像预览</p>
            <div class="actions"><button class="btn" id="btn-load-results">加载我的报告</button></div>
            <div id="list-results" class="list"></div>
        </section>

        <section id="rx" class="card">
            <h2>电子处方与药品服务</h2>
            <p class="muted">查看电子处方，支持线上配送/线下自提与医保预结算</p>
            <div class="actions"><button class="btn" id="btn-load-rx">加载处方</button></div>
            <div id="list-rx" class="list"></div>
        </section>

        <!-- 二、健康信息管理 -->
        <section id="record" class="card">
            <h2>个人健康档案</h2>
            <p class="muted">整合就诊记录、过敏史、用药史，支持自主录入生活方式</p>
            <div class="actions">
                <input id="inp-user" class="input" placeholder="用户ID（u_demo）" />
                <button class="btn" id="btn-load-record">加载档案</button>
            </div>
            <pre class="output" id="out-record"></pre>
        </section>

        <section id="chronic" class="card">
            <h2>慢病监测与管理</h2>
            <p class="muted">记录血压/血糖等指标，图表展示趋势并推送建议</p>
            <form class="grid grid-4" id="form-metric">
                <select class="input" name="type">
                    <option value="blood_pressure">血压</option>
                    <option value="blood_glucose">血糖</option>
                </select>
                <input class="input" name="systolic" placeholder="收缩压(如 130)" />
                <input class="input" name="diastolic" placeholder="舒张压(如 85)" />
                <input class="input" name="value" placeholder="血糖(如 6.1)" />
                <button class="btn primary" type="submit">记录</button>
            </form>
            <div class="actions">
                <input id="inp-user2" class="input" placeholder="用户ID（u_demo）" />
                <button class="btn" id="btn-load-metrics">加载趋势</button>
            </div>
            <canvas id="chart" height="120"></canvas>
        </section>

        <!-- 三、医疗服务延伸 -->
        <section id="consult" class="card">
            <h2>在线咨询（豆包AI助理）</h2>
            <p class="muted">图文轻问诊，可上传病历辅助医生判断（演示不含上传）</p>
            <div class="chat" id="chat"></div>
            <form class="chat-input" id="form-chat">
                <input class="input" id="inp-chat" placeholder="请描述症状、持续时间与伴随症状…" />
                <button class="btn primary" type="submit">发送</button>
            </form>
        </section>

        <section id="edu" class="card">
            <h2>健康科普与教育</h2>
            <div class="actions"><button class="btn" id="btn-load-edu">加载科普</button></div>
            <ul id="list-edu" class="list"></ul>
        </section>

        <!-- 四、工具与互动功能 -->
        <section id="pay" class="card">
            <h2>医疗支付</h2>
            <form class="grid grid-4" id="form-pay">
                <input class="input" name="amount" placeholder="金额(元)" required />
                <select class="input" name="method">
                    <option value="医保">医保</option>
                    <option value="微信">微信</option>
                    <option value="支付宝">支付宝</option>
                    <option value="银联">银联</option>
                </select>
                <button class="btn primary" type="submit">立即支付</button>
            </form>
            <pre class="output" id="out-pay"></pre>
        </section>

        <section id="nav" class="card">
            <h2>就医导航</h2>
            <div class="actions"><button class="btn" id="btn-load-map">加载导航信息</button></div>
            <div id="nav-info" class="muted"></div>
        </section>

        <section id="feedback" class="card">
            <h2>满意度反馈</h2>
            <form class="grid grid-4" id="form-feedback">
                <input class="input" name="score" placeholder="评分(1-5)" required />
                <input class="input" name="content" placeholder="留言(可选)" />
                <button class="btn primary" type="submit">提交评价</button>
            </form>
            <div class="muted">感谢您的反馈，帮助我们持续优化服务</div>
        </section>
    </main>

    <footer class="footer">© 2025 患者端就医服务门户 · 提供基础医疗服务的轻量化Web体验</footer>
</body>

</html>